<template>
	<!-- 圈子详情页面 -->
	<view class="main">
		<!-- 顶部 -->
			<!-- 操作按钮 -->
			<view class="tuichu" @tap="handleFan">
				<image src="../../imges/quanzi.png" mode="aspectFill"></image>
			</view>
			<navigator :url="'/pages/my_circle/setQuan?id=' + circleId + '&img=' + quanDetail.orgUrl+ '&name=' + quanDetail.orgName + '&code=1'"
			 hover-class="none" v-if="quanDetail.isOrg == 1">
				<view class="shezhi">
					<image src="../../imges/shezhi.png" mode="aspectFill"></image>
				</view>
			</navigator>
			<!-- 详情 -->
			<view class="detail">
				<view class="left">
					<image :src="quanDetail.orgUrl" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="name">
						{{quanDetail.orgName}}
					</view>
					<view :class="[ des_Is ? 'des des_Is' : 'des']">
						{{quanDetail.orgIntroduce}}
					</view>

					<image src="../../imges/detailXia.png" mode="aspectFill" v-if="des_Is && quanDetail.orgIntroduce.length> 45" @tap="showMore"></image>
					<image src="../../imges/detailShang.png" mode="aspectFill" v-if="!des_Is && quanDetail.orgIntroduce.length> 45" @tap="noshowMore"> </image>
				</view>
			</view> <!-- 圈子信息 -->
			<view class="quanzi">
				<view class="left">
					<navigator :url="'/pages/index/personal?id=' + quanDetail.createUid" class="one" hover-class="none">
						<image :src="quanDetail.avatarUrl" mode="aspectFill"></image>
					</navigator>
					<view class="two">
						<navigator :url="'/pages/index/personal?id=' + quanDetail.createUid" class="title" hover-class="none">
							{{quanDetail.applyName}}
						</navigator>
						<view class="dest">
							圈主
						</view>
					</view>
				</view>
				<view class="right">
					<view class="imgs">
						<image :src="item" mode="aspectFill" v-for="(item,index) in quanDetail.userUrlList" :key="index" :class="[quanDetail.userUrlList.length == 3 ? 'imgsss' : 'imgss']">
					</view>
					<text>成员{{quanDetail.peopleNumber}}&nbsp;帖子{{quanDetail.postNumber}}</text>
				</view>
			</view>
			<!-- 标签 -->
			<view class="lable">
				<view class="item" v-for="(item,index) in quanDetail.friendsLists" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 吸顶 -->
		<view class="top1" :style="{opacity:topOpacity2}" v-if="scrollTop">
			<view class="left">
				<view class="one">
					<image :src="quanDetail.orgUrl" mode="aspectFill"></image>
				</view>
				<view class="two">
					<view class="first">
						{{quanDetail.orgName}}
					</view>
					<view class="second">
						<text>圈主</text>{{quanDetail.applyName}}&nbsp;&nbsp; 成员{{quanDetail.peopleNumber}}&nbsp; 帖子{{quanDetail.postNumber}}
					</view>
				</view>
			</view>
			<view class="right">
				<navigator :url="'/pages/my_circle/setQuan?id=' + circleId + '&img=' + quanDetail.orgUrl+ '&name=' + quanDetail.orgName"
				 hover-class="none" v-if="quanDetail.isOrg == 1">
					<view class="shezhi1">
						<image src="../../imges/shezhi.png" mode="aspectFill"></image>
					</view>
				</navigator>
				<view class="tuichu1" @tap="handleFan">
					<image src="../../imges/quanzi.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 下面内容 -->
		<view :class="[scrollTop == true ? 'content content6' : 'content']">
			<!-- tab栏 -->
			<view :class="[scrollTop == true ? 'tab active999' : 'tab']">
				<scroll-view scroll-x="true" class="bookshelf-content">
					<view class="item_tab">
						<view v-for="(item,index) in quanDetail.friendsTopics" :key="index" @tap="handleChangeTab(index,item.id)" :class="[activeIndex == index ? 'tabIndex , active' : 'tabIndex']">
							{{item.topic}}
							<text class="xian_"></text>
						</view>
					</view>
				</scroll-view>
				<!-- 进去话题 -->
				<navigator :url="'/pages/index/manageTopic?id=' + circleId" hover-class="none" class="jiaTab" v-if="quanDetail.isOrg == 1">
					<image src="../../imges/jiaTab.png" mode="aspectFill"></image>
				</navigator>
			</view>
			<!-- 成员 -->
			<view class="child" v-if="activeIndex == 0">
				<view class="list">
					<view class="item" v-for="(item,index) in memberList " :key="index">
						<view class="left">
							<navigator :url="'/pages/index/personal?id=' + item.userId" hover-class="none" class="one">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
							</navigator>

							<navigator :url="'/pages/my_circle/memberPostList?id='+ circleId +'&uId=' + item.userId + '&name='+ item.applyName + '&img=' + item.avatarUrl"
							 class="two" hover-class="none">
								<view class="top">
									<text class="name">{{item.applyName}}</text>
									<text class="dec">{{item.company}}</text>
									<text class="zhu" v-if="item.isOrg == 1">圈主</text>
								</view>
								<view class="bottom">
									发帖&nbsp; {{item.postNumber}}
									<!-- <text class="xian"></text> 积分&nbsp; 100 -->
								</view>
							</navigator>
						</view>
						<!-- 	<view class="right" @tap="handleBtn">
							...
						</view> -->
					</view>
				</view>
			</view>

			<!-- 精华和最新 -->
			<view class="child1" v-if="activeIndex != 0">
				<!-- 精华 -->
				<view class="jing" v-if="activeIndex == 1">
					<image src="../../imges/jinghua.png" mode="aspectFill"></image>
					<view class="cont">
						<view class="num">
							{{SerumTotal}} <text>篇</text>
						</view>
						<view class="zi">
							本圈子已有精华帖数
						</view>
					</view>
				</view>
				<!--精华帖的空状态 -->
				<view class="wu_Huo" v-if="activeIndex == 1 && SerumList.length == 0">
					<image src="../../imges/nojinghuatie.png" mode="aspectFill"></image>
					<text>暂无精华帖</text>
				</view>
				<!-- 精华贴子部分 -->
				<view class="child2" v-for="(item,index) in SerumList" :key="index" v-if="activeIndex == 1 && SerumList.length > 0">
					<!-- 下隔线 -->
					<view class="xian"></view>
					<!-- 顶部信息 -->
					<view class="top">
						<view class="left">
							<view class="one">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
							</view>
							<!-- 进帖子详情 -->
							<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
								<view class="two">
									<view class="top1">
										<view>
											{{item.userName}}
										</view>
										<text>{{item.company}}</text>
									</view>
									<view class="bottom1">
										{{item.createTime}}
									</view>
								</view>
							</navigator>
						</view>
						<view class="right" @tap="showZhi(index)">
							<view class="one">
								...
							</view>
							<view class="two">
								<image src="../../imges/zhiding.png" mode="aspectFill" class="zhiding" v-if="item.isTop == 1"></image>
								<image src="../../imges/jing.png" mode="aspectFill" class="jinghua" v-if="item.isEssences == 1"></image>
							</view>
							<!-- 帖子弹窗 -->

							<view :class="[item.isTop == 1 || item.isEssences == 1 ?'three66' : 'three66 three666' ]" v-if="item.is_show">
								<view class="jiao">
								</view>
								<view class="one1" v-if="item.isTop == 1 && item.isAdmin ==1" @tap.stop="updateIsTop(item.id,0)">
									取消置顶
								</view>
								<view class="one1" v-if="item.isTop == 0 && item.isAdmin ==1" @tap.stop="updateIsTop(item.id,1)">
									置顶
								</view>
								<view hover-class="none" class="one1" v-if="item.isEssences == 0 && item.isAdmin == 1" @tap.stop="handleSerum(item.id,1,1)">
									设精华帖
								</view>
								<view hover-class="none" class="one1" v-if="item.isEssences == 1 && item.isAdmin == 1" @tap.stop="handleSerum(item.id,0,1)">
									取消精华帖
								</view>
								<navigator :url="'/pages/my_circle/report?id=' + item.id" class="one1" hover-class="none">
									举报
								</navigator>

								<navigator :url="'/pages/newPost/newEditor?id=' + item.id" class="one1" hover-class="none" v-if="item.isSelf ==1">
									编辑
								</navigator>

								<view class="one1" v-if="item.isSelf ==1 || item.isAdmin == 1" @tap.stop="handleDelete(item.id,1)">
									删除
								</view>
							</view>

						</view>
					</view>
					<!-- 中间内容 及图片 -->
					<!-- 进帖子详情 -->
					<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
						<view class="text_">
							{{item.content}} <text v-if="item.is_content">...</text><text v-if="item.is_content" class="quan">全文</text>
						</view>
					</navigator>
					<!-- 图片显示 -->
					<view class="imgs">
						<!-- 多张照片 -->
						<video class="myVideo" v-for="(item6,index6) in item.imgCollection" :key="index6" :src="item6.fileUrl" :duration="item6.videoTime"
						 object-fit="cover" controls :poster="
						 item6.firstUrl" v-if="item.imgCollection.length == 1 && item6.fileType == 3"></video>
						<video class="myVideo" v-for="(item6,index6) in item.imgCollection" :key="index6" :src="item6.fileUrl" :duration="item6.videoTime"
						 object-fit="cover" controls :poster="item6.firstUrl" v-if="item.imgCollection.length > 1 && item6.fileType == 3 && item.is_video"></video>
						<image :src="item6.fileUrl" mode="aspectFill" v-for="(item6,index6) in item.imgCollection" :key="index6" v-if="item.imgCollection.length > 1 && item6.fileType == 1 && !item.is_video"
						 @tap="imgsDa(item.imgCollection,index6)"></image>

						<!-- 一张或者一个视频 -->
						<image class="myVideo" v-for="(item6,index6) in item.imgCollection" :key="index6" :src="item6.fileUrl" mode="aspectFill"
						 v-if="item.imgCollection.length == 1 && item6.fileType == 1" @tap="imgsDa(item.imgCollection,index6)"></image>

					</view>
					<!-- 点赞评论 -->
					<view class="commit">
						<navigator :url="'/pages/index/trickDetail?id=' + item.id + '&type=2'" hover-class="none">
							<view class="left">
								<image :src="item2" mode="aspectFill" v-for="(item2,index2) in item.thumbsList" :key="index2"></image>
								<!-- 已赞显示 -->
								<text v-if="item.thumbsList.length == 5">已赞</text>
								<text v-if="item.thumbsList.length == 4" class="four">已赞</text>
								<text v-if="item.thumbsList.length == 3" class="three">已赞</text>
								<text v-if="item.thumbsList.length == 2" class="two">已赞</text>
								<text v-if="item.thumbsList.length == 1" class="one">已赞</text>
							</view>
						</navigator>
						<view class="right">
							<view class="one">
								<image src="../../imges/zan.png" mode="aspectFill" v-if="item.isThumbs ==1" @tap="handleZan(item.id,1,1)"></image>
								<image src="../../imges/zan1.png" mode="aspectFill" v-if="item.isThumbs == 0" @tap="handleZan(item.id,0,1)"></image>
								&nbsp;<text>{{item.thumbsCount}}</text>
							</view>
							&nbsp;&nbsp;
							<navigator :url="'/pages/index/trickDetail?id=' + item.id" class="two" hover-class="none">
								<image src="../../imges/pinglun.png" mode="aspectFill"></image>
								&nbsp;<text>{{item.commentsCount}}</text>
							</navigator>
						</view>
					</view>

					<!-- 评论列表 -->
					<!-- 进帖子详情 -->
					<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
						<view class="commit_list">
							<view class="item" v-for="(item8,index8) in item.comments" :key="index8">
								<text :class="[item8.realName.length > 5 &&  item8.picturesUrl.length > 0 ? 'name name1' : 'name']">{{item8.realName}}</text>
								<view class="img" v-if="item8.picturesUrl.length > 0">
									<image src="../../imges/chaimg.png" mode="aspectFill"></image> <text>查看图片</text>
								</view>
								<text class="t_comm">{{item8.content}}</text>

							</view>
							<view class="footer" v-if="item.commentsCount != 0">
								查看全部{{item.commentsCount}}条评论及回复 <text>></text>
							</view>
						</view>
					</navigator>
				</view>

				<!-- 最新没有帖子的空状态 -->
				<view class="wu_Huo" v-if="activeIndex == 2 && newQList.length == 0">
					<image src="../../imges/nojinghuatie.png" mode="aspectFill"></image>
					<text>暂无帖子</text>
				</view>
				<!-- 贴子部分 -->
				<view class="child2" v-for="(item,index) in newQList" :key="index" v-if="activeIndex == 2">
					<!-- 下隔线 -->
					<view class="xian"></view>
					<!-- 顶部信息 -->
					<view class="top">
						<view class="left">
							<navigator :url="'/pages/index/personal?id=' + item.createUid" class="one" hover-class="none">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
							</navigator>

							<!-- 进帖子详情 -->
							<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
								<view class="two">
									<view class="top1">
										{{item.userName}} <text>{{item.company}}</text>
									</view>
									<view class="bottom1">
										{{item.createTime}}
									</view>
								</view>
							</navigator>
						</view>
						<view class="right" @tap="showZhi(index)">
							<view class="one">
								...
							</view>
							<view class="two">
								<image src="../../imges/zhiding.png" mode="aspectFill" class="zhiding" v-if="item.isTop == 1"></image>
								<image src="../../imges/jing.png" mode="aspectFill" class="jinghua" v-if="item.isEssences == 1"></image>
							</view>
							<!-- 帖子弹窗 -->
							<view :class="[item.isTop == 1 || item.isEssences == 1 ?'three66' : 'three66 three666' ]" v-if="item.is_show">
								<view class="jiao">
								</view>
								<view hover-class="none" class="one1" v-if="item.isEssences == 0 && item.isAdmin == 1" @tap.stop="handleSerum(item.id,1,2)">
									设精华帖
								</view>
								<view hover-class="none" class="one1" v-if="item.isEssences == 1 && item.isAdmin == 1" @tap.stop="handleSerum(item.id,0,2)">
									取消精华帖
								</view>
								<navigator :url="'/pages/my_circle/report?id=' + item.id" class="one1" hover-class="none">
									举报
								</navigator>
								<navigator :url="'/pages/newPost/newEditor?id=' + item.id" class="one1" hover-class="none" v-if="item.isSelf == 1">
									编辑
								</navigator>
								<view class="one1" hover-class="none" v-if="item.isSelf == 1 || item.isAdmin == 1" @tap.stop="handleDelete(item.id,2)">
									删除
								</view>
							</view>
						</view>
					</view>
					<!-- 中间内容 及图片 -->
					<!-- 进帖子详情 -->
					<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
						<view class="text_">
							{{item.content}} <text v-if="item.is_content">...</text><text v-if="item.is_content" class="quan">全文</text>
						</view>
					</navigator>
					<!-- 图片显示 -->
					<view class="imgs">
						<!-- 多张照片 -->
						<image :src="item1.fileUrl" mode="aspectFill" v-for="(item1,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length > 1 &&  item1.fileType== 1  && !item.is_video"
						 @tap="imgsDa(item.imgCollection,index1)"></image>
						<!-- 一张或者一个视频 -->
						<image class="myVideo" :src="item1.fileUrl" v-for="(item1,index1) in item.imgCollection" :key="index1" mode="aspectFill"
						 @tap="imgsDa(item.imgCollection,index1)" v-if="item.imgCollection.length == 1 && item1.fileType== 1"></image>
						<video class="myVideo" :src="item.imgCollection[0].fileUrl" v-if="item.imgCollection.length == 1 && item.imgCollection[0].fileType== 3"
						 :duration="item.imgCollection[0].videoTime" object-fit="cover" controls :poster="item.imgCollection[0].firstUrl"></video>

						<video class="myVideo" :src="item1.fileUrl" v-for="(item1,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length > 1 && item1.fileType== 3 && item.is_video"
						 :duration="item1.videoTime" object-fit="cover" controls :poster="item1.firstUrl"></video>
					</view>
					<!-- 点赞评论 -->
					<view class="commit">
						<navigator :url="'/pages/index/trickDetail?id='+ item.id + '&type=2'" hover-class="none">
							<view class="left">
								<image :src="item1" mode="aspectFill" v-for="(item1,index1) in item.thumbsList" :key="index1"></image>
								<!-- 已赞显示 -->
								<text v-if="item.thumbsList.length == 5">已赞</text>
								<text v-if="item.thumbsList.length == 4" class="four">已赞</text>
								<text v-if="item.thumbsList.length == 3" class="three">已赞</text>
								<text v-if="item.thumbsList.length == 2" class="two">已赞</text>
								<text v-if="item.thumbsList.length == 1" class="one">已赞</text>
							</view>
						</navigator>
						<view class="right">
							<view class="one">
								<image src="../../imges/zan.png" mode="aspectFill" v-if="item.isThumbs == 1 " @tap="handleZan(item.id,1,2,)"></image>
								<image src="../../imges/zan1.png" mode="aspectFill" v-if="item.isThumbs == 0" @tap="handleZan(item.id,0,2)"></image>
								&nbsp;<text>{{item.thumbsCount}}</text>
							</view>
							&nbsp;&nbsp;
							<navigator :url="'/pages/index/trickDetail?id=' + item.id" class="two" hover-class="none">
								<image src="../../imges/pinglun.png" mode="aspectFill"></image>
								&nbsp;<text>{{item.commentsCount}}</text>
							</navigator>
						</view>
					</view>
					<!-- 评论列表 -->
					<!-- 进帖子详情 -->
					<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
						<view class="commit_list">
							<view class="item" v-for="(item2,index2) in item.comments" :key="index2">
								<text :class="[item2.realName.length > 5 &&  item2.picturesUrl.length > 0 ? 'name name1' : 'name']">{{item2.realName}}</text>
								<view class="img" v-if="item2.picturesUrl.length > 0">
									<image src="../../imges/chaimg.png" mode="aspectFill"></image> <text>查看图片</text>
								</view>
								<text class="t_comm">{{item2.content}}</text>
							</view>
							<view class="footer" v-if="item.commentsCount != 0">
								查看全部{{item.commentsCount}}条评论及回复 <text>></text>
							</view>
						</view>
					</navigator>
				</view>
				<!-- 话题关联的帖子列表 -->
				<!-- 最新没有帖子的空状态 -->
				<view class="wu_Huo" v-if="activeIndex != 0 && activeIndex != 1 &&activeIndex != 2 && topicTList.length == 0">
					<image src="../../imges/nojinghuatie.png" mode="aspectFill"></image>
					<text>暂无帖子</text>
				</view>
				<!-- 贴子部分 -->
				<view class="child2" v-for="(item,index) in topicTList" :key="index" v-if="activeIndex != 0 && activeIndex != 1 && activeIndex != 2">
					<!-- 下隔线 -->
					<view class="xian"></view>
					<!-- 顶部信息 -->
					<view class="top">
						<view class="left">
							<navigator :url="'/pages/index/personal?id=' + item.createUid" class="one" hover-class="none">
								<image :src="item.avatarUrl"></image>
							</navigator>
							<!-- 进帖子详情 -->
							<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
								<view class="two">
									<view class="top1">
										{{item.userName}} <text>{{item.company}}</text>
									</view>
									<view class="bottom1">
										{{item.createTime}}
									</view>
								</view>
							</navigator>
						</view>
						<view class="right" @tap="showZhi(index)">
							<view class="one">
								...
							</view>
							<view class="two">
								<image src="../../imges/zhiding.png" mode="aspectFill" class="zhiding" v-if="item.isTop == 1"></image>
								<image src="../../imges/jing.png" mode="aspectFill" class="jinghua" v-if="item.isEssences == 1"></image>
							</view>
							<!-- 帖子弹窗 -->

							<view :class="[item.isTop == 1 || item.isEssences == 1 ?'three66' : 'three66 three666' ]" v-if="item.is_show">
								<view class="jiao">
								</view>
								<view hover-class="none" class="one1" v-if="item.isEssences == 0 && item.isAdmin == 1" @tap.stop="handleSerum(item.id,1,6)">
									设精华帖
								</view>
								<view hover-class="none" class="one1" v-if="item.isEssences == 1 && item.isAdmin == 1" @tap.stop="handleSerum(item.id,0,6)">
									取消精华帖
								</view>
								<navigator :url="'/pages/my_circle/report?id=' + item.id" class="one1" hover-class="none">
									举报
								</navigator>

								<navigator :url="'/pages/newPost/newEditor?id=' + item.id" class="one1" hover-class="none" v-if="item.isSelf == 1">
									编辑
								</navigator>

								<view class="one1" hover-class="none" v-if="item.isSelf == 1 || item.isAdmin == 1" @tap.stop="handleDelete(item.id,6)">
									删除
								</view>
							</view>
						</view>
					</view>
					<!-- 中间内容 及图片 -->
					<!-- 进帖子详情 -->
					<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
						<view class="text_">
							{{item.content}} <text v-if="item.is_content">...</text><text v-if="item.is_content" class="quan">全文</text>
						</view>
					</navigator>
					<!-- 图片显示 -->
					<view class="imgs">
						<!-- 多张照片 -->
						<image :src="item1.fileUrl" mode="aspectFill" v-for="(item1,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length > 1 && item1.fileType  == 1 && !item.is_video"
						 @tap="imgsDa(item.imgCollection,index1)"></image>
						<!-- 一张或者一个视频 -->
						<image class="myVideo" :src="item1.fileUrl" v-for="(item1,index1) in item.imgCollection" :key="index1" mode="aspectFill"
						 @tap="imgsDa(item.imgCollection,index1)" v-if="item.imgCollection.length == 1 && item1.fileType  == 1"></image>
						<video class="myVideo" :src="item1.fileUrl" v-for="(item1,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length == 1 && item1.fileType  == 3"
						 :duration="item1.videoTime" object-fit="cover" controls :poster="item1.firstUrl"></video>

						<video class="myVideo" :src="item1.fileUrl" v-for="(item1,index1) in item.imgCollection" :key="index1" v-if="item.imgCollection.length > 1 && item1.fileType  == 3 && item.is_video"
						 :duration="item1.videoTime" object-fit="cover" controls :poster="item1.firstUrl"></video>
					</view>

					<!-- 点赞评论 -->
					<view class="commit">
						<navigator :url="'/pages/index/trickDetail?id='+ item.id + '&type=2'" hover-class="none">
							<view class="left">
								<image :src="item1" mode="aspectFill" v-for="(item1,index1) in item.thumbsList" :key="index1"></image>
								<!-- 已赞显示 -->
								<text v-if="item.thumbsList.length == 5">已赞</text>
								<text v-if="item.thumbsList.length == 4" class="four">已赞</text>
								<text v-if="item.thumbsList.length == 3" class="three">已赞</text>
								<text v-if="item.thumbsList.length == 2" class="two">已赞</text>
								<text v-if="item.thumbsList.length == 1" class="one">已赞</text>
							</view>
						</navigator>
						<view class="right">
							<view class="one">
								<image src="../../imges/zan.png" mode="aspectFill" v-if="item.isThumbs == 1 " @tap="handleZan(item.id,1,6)"></image>
								<image src="../../imges/zan1.png" mode="aspectFill" v-if="item.isThumbs == 0" @tap="handleZan(item.id,0,6)"></image>
								&nbsp;<text>{{item.thumbsCount}}</text>
							</view>
							&nbsp;&nbsp;
							<navigator :url="'/pages/index/trickDetail?id=' + item.id" class="two" hover-class="none">
								<image src="../../imges/pinglun.png" mode="aspectFill"></image>
								&nbsp;<text>{{item.commentsCount}}</text>
							</navigator>
						</view>
					</view>
					<!-- 评论列表 -->
					<!-- 进帖子详情 -->
					<navigator :url="'/pages/index/trickDetail?id=' + item.id" hover-class="none">
						<view class="commit_list">
							<view class="item" v-for="(item2,index2) in item.comments" :key="index2">
								<text :class="[item2.realName.length > 5 &&  item2.picturesUrl.length > 0 ? 'name name1' : 'name']">{{item2.realName}}</text>
								<view class="img" v-if="item2.picturesUrl.length > 0">
									<image src="../../imges/chaimg.png" mode="aspectFill"></image> <text>查看图片</text>
								</view>
								<text class="t_comm">{{item2.content}}</text>
							</view>
							<view class="footer" v-if="item.commentsCount != 0">
								查看全部{{item.commentsCount}}条评论及回复 <text>></text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 底部固定 -->
		<view class="fixation">
			<view class="one" @tap="handleFaTie">
				<image src="../../imges/fatie.png" mode="aspectFill"></image>
				<text>发帖</text>
			</view>
			<view class="two" v-if="quanDetail.isOrg == 3" @tap="joinYes">
				<image src="../../imges/jia66.png" mode="aspectFill"></image>
				<text>加入</text>
			</view>
			<view class="three" @tap="openShare">
				<image src="../../imges/fen66.png" mode="aspectFill"></image>
				<text>分享</text>
				<!-- <text v-if="chargeStatus == 1">(拿分佣)</text> -->
			</view>
		</view>

		<view :class="[is_show == true ? 'main66' : '']" @tap.stop="showNo" @touchstart.stop.prevent="showNo">
		</view>
		<!-- 去APP的链接 -->
		<view class="zheZhao" @tap.stop="quMask" v-if="is_mask" @touchstart.stop.prevent="quMask">
		</view>
		<view class="modal" v-if="is_mask">
			<view class="header">
				提示
			</view>
			<view class="text">
				是否前往APP邀请好友活动？
			</view>
			<view class="btn_">
				<view class="left" @tap="quMask">
					取消
				</view>
				<view>
					<uni-link class="right" href="https://www.yiqilaiwang.com/h5openapp2/app.html" text="确认" showUnderLine="false"
					 color="#0476FC">
					</uni-link>
				</view>
			</view>
		</view>
		<!-- 控制还未加圈子 进来提示的弹框 -->
		<view class="zheZhao" @tap.stop="handleJoin" v-if="no_join" @touchstart.stop.prevent="handleJoin">
		</view>
		<view class="modal" v-if="no_join">
			<view class="header">
				提示
			</view>
			<view class="text">
				确定是否加入该圈子？
			</view>
			<view class="btn_">
				<view class="left" @tap="handleJoin">
					取消
				</view>
				<view class="right right1" @tap.stop="joinYes">
					确定
				</view>
			</view>
		</view>

		<!-- 收费未交费的弹窗 -->
		<view class="zhezhao1" v-if="is_rate" @touchstart.stop="guanbiFei" @tap="guanbiFei"></view>
		<view class="content1" v-if="is_rate">
			<view class="top">
				<image src="../../imges/weixufei.png" mode="aspectFill"></image>
				<image src="../../imges/cha.png" mode="aspectFill" class="guanbi" @tap="guanbiFei"></image>
			</view>
			<view class="title">
				您尚未<text v-if="pay_type == 1">续费</text><text v-if="pay_type == 0">缴费</text>，无法查看圈子内容
			</view>
			<navigator :url="'/pages/my_circle/setToll?id=' + circleId + '&socialId=' + socialId + '&oneLevelId=' + firstDistribution"
			 hover-class="none" open-type="redirect">
				<view class="footer_btn">
					立即<text v-if="pay_type == 1">续费</text><text v-if="pay_type == 0">缴费</text>
				</view>
			</navigator>
		</view>
		<!-- 分享收费圈子弹窗-->
		<view class="share" v-if="isShare">
			<view class="top_">
				<view class="jiao_"></view>
				<view class="title_">
					分享方法：
				</view>
				<view class="body_">
					1.点击右上角 <text>...</text>
				</view>
				<view class="body_">
					2.分享到您的朋友圈或好友
				</view>
			</view>
			<view class="center_">
				<image src="../../imges/fenxiang22.png" mode="aspectFill"></image>

				<navigator url="/pages/per_center/distrCommission" class="btn_" hover-class="none">
					查看我的佣金
				</navigator>
			</view>
			<view class="bottom_" @tap="closeShare">
				<image src="../../imges/guanbi.png" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 分享不收费弹窗 -->
		<view class="mask_FX" v-if="FX_mask" @tap="closeFX_mask">
			<image src="../../imges/fenxiang_quanzi.png" mode="aspectFill"></image>
		</view>
	</view>
</template>
<script>
import request from "../../utils/request.js";
var jweixin = require("jweixin-module"); //配置
export default {
  data() {
    return {
      isShare: false,
      circleId: "", //圈子id
      quanDetail: { orgIntroduce: "" }, //圈子详情
      topOpacity: 1,
      topOpacity2: 0,
      activeIndex: 2, //tab栏索引
      scrollTop: false, //判断滚动
      is_show: false, //判断是否显示
      quanList: [{}, {}, {}, {}], //帖子列表
      is_mask: false, //去app遮窗
      no_join: false, //进来提示是否加圈子(不收费)
      is_rate: false, //收费圈子未交费(提示)
      memberList: [], //圈子成员列表
      pageSize: 10,
      bottom: false,
      noMore: false,
      pageSize2: 10, //最新
      newQList: [],
      bottom2: false,
      noMore2: false,
      pageSize1: 10, //精华
      bottom1: false,
      noMore1: false,
      SerumList: [],
      SerumTotal: "",
      pageSize6: 10, //话题关联帖子
      topicTList: [],
      bottom6: false,
      noMore6: false,
      topicId: "", //话题id
      chargeStatus: 0, //是否为收费圈子
      encryptUserId: "", //当前用户id
      word: 0,
      pay_type: 0, //判断缴费还是续费
      FX_mask: false,
      type: 0,
      isZ: 0, //圈子收益跳转
      joinY: true,
      socialId: "", //社交消息id1
      firstDistribution: "", //分销id
      des_Is: true, //进来就换行
    };
  },
  onPullDownRefresh() {
    if (this.activeIndex == 0) {
      this.pageSize = 10;
      this.bottom = false;
      this.noMore = false;
      this.quanMember();
      setTimeout(() => {
        uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          duration: 2000,
          icon: "none",
        });
      }, 1000);
    } else if (this.activeIndex == 2) {
      this.pageSize2 = 10;
      this.bottom2 = false;
      this.noMore2 = false;
      setTimeout(() => {
        uni.stopPullDownRefresh();
        this.newList();
        uni.showToast({
          title: "刷新成功",
          duration: 2000,
          icon: "none",
        });
      }, 1000);
    } else if (this.activeIndex == 1) {
      this.pageSize1 = 10;
      this.bottom1 = false;
      this.noMore1 = false;
      setTimeout(() => {
        uni.stopPullDownRefresh();
        this.handleSerumList();
        uni.showToast({
          title: "刷新成功",
          duration: 2000,
          icon: "none",
        });
      }, 1000);
    } else {
      this.pageSize6 = 10;
      this.bottom6 = false;
      this.noMore6 = false;
      setTimeout(() => {
        uni.stopPullDownRefresh();
        this.handleTopic(this.topicId);
        uni.showToast({
          title: "刷新成功",
          duration: 2000,
          icon: "none",
        });
      }, 1000);
    }
  },
  onReachBottom() {
    if (this.activeIndex == 0) {
      this.bottom = true;
      uni.showLoading({
        title: "加载中",
      });
      this.pageSize = this.pageSize + 10;
      this.quanMember();
    } else if (this.activeIndex == 2) {
      this.bottom2 = true;
      uni.showLoading({
        title: "加载中",
      });
      this.pageSize2 = this.pageSize2 + 10;
      this.newList();
    } else if (this.activeIndex == 1) {
      this.bottom1 = true;
      uni.showLoading({
        title: "加载中",
      });
      this.pageSize1 = this.pageSize1 + 10;
      this.handleSerumList();
    } else {
      this.bottom6 = true;
      uni.showLoading({
        title: "加载中",
      });
      this.pageSize6 = this.pageSize6 + 10;
      this.handleTopic(this.topicId);
    }
  },
  onShow() {
    this.isShare = false;
    let token = uni.getStorageSync("token");
    if (token) {
      this.quanDetailF(); //详情
      this.encryptUserId = uni.getStorageSync("personal").encryptUserId;
    }

    this.is_show = false;
    this.is_mask = false;
    if (this.activeIndex == 2) {
      this.newQList.forEach((v) => {
        v.is_show = false;
      });
    } else if (this.activeIndex == 1) {
      this.SerumList.forEach((v) => {
        v.is_show = false;
      });
    } else if (this.topicTList.length != 0) {
      this.topicTList.forEach((v) => {
        v.is_show = false;
      });
    }
    this.bottom = false;
    this.bottom1 = false;
    this.bottom2 = false;
    this.bottom6 = false;
    this.handleShare(); //分享
  },
  onLoad(options) {
    if (options.firstDistribution) {
      //分销id
      this.firstDistribution = options.firstDistribution;
    }
    if (options.socialId) {
      this.socialId = options.socialId;
    }
    this.circleId = options.id;
    let token = uni.getStorageSync("token");
    if (options.word == 1) {
      this.word = 1;
      if (!token) {
        this.handleShareDetail();
      }
    }
    if (options.type == 1) {
      this.type = 1;
    }
    if (options.isZ) {
      this.isZ = options.isZ;
    }
    if (token) {
      this.quanMember(); //圈子成员列表
    }
  },
  methods: {
    noshowMore() {
      this.des_Is = true;
    },
    showMore() {
      this.des_Is = false;
    },
    handleFaTie() {
      //点击发帖
      if (this.quanDetail.isOrg == 3) {
        uni.showToast({
          title: "您还不是圈子成员，请先加入圈子",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      uni.navigateTo({
        url: "/pages/newPost/newPost?id=" + this.circleId,
      });
    },
    closeFX_mask() {
      //关闭不收费分享
      this.FX_mask = false;
    },
    handleShareDetail() {
      //不传token主页
      uni.showLoading({
        title: "加载中",
      });
      request({
        url: "h5/org/h5FriendsHomeInfo",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          orgId: this.circleId,
        },
      }).then((res) => {
        uni.hideLoading();
        if (res.data.code == 200) {
          if (res.data.data.userUrlList.length > 3) {
            res.data.data.userUrlList.length = 3;
          }
          this.quanDetail = res.data.data;
          this.handleShare(); //分享功能
          this.quanDetail.friendsTopics = [
            {
              topic: "成员",
              id: 1,
            },
            {
              topic: "精华",
              id: 2,
            },
            {
              topic: "最新",
              id: 3,
            },
            ...res.data.data.friendsTopics,
          ];
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
          if (res.data.msg == "该圈子已注销" || res.data.msg == "圈子不存在") {
            this.newQList = [];
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/index/index",
              });
            }, 1000);
          }
        }
      });
    },
    closeShare() {
      this.isShare = false;
    },
    openShare() {
      if (this.quanDetail.isDistribution == 0) {
        //不分销
        this.FX_mask = true;
      } else {
        //分销
        this.isShare = true;
      }
    },
    handleShare() {
      //分享功能
      let that = this;
      request({
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          jweixin.ready(function () {
            // 判断需要跳转的链接
            if (that.chargeStatus == 1) {
              //是收费圈子
              var linkUrl =
                "https://h5test.yiqilaiwang.com/circle_h5/pages/index/noPayDetail?id=" +
                that.circleId +
                "&encryptUserId=" +
                encodeURIComponent(that.encryptUserId);
            } else {
              //不是收费圈子
              var linkUrl =
                "https://h5test.yiqilaiwang.com/circle_h5/pages/index/detail?id=" +
                that.circleId +
                "&word=1"; //分享链接
            }
            jweixin.updateAppMessageShareData({
              title: that.quanDetail.orgName, //分享标题
              desc: that.quanDetail.orgIntroduce, // 分享描述
              link: linkUrl,
              imgUrl: that.quanDetail.orgUrl, //分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            });
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            jweixin.updateTimelineShareData({
              title: that.quanDetail.orgName, //分享标题
              desc: that.quanDetail.orgIntroduce, // 分享描述
              link: linkUrl, //分享链接
              imgUrl: that.quanDetail.orgUrl, //分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    handleSerumList() {
      //精华帖列表
      let token = uni.getStorageSync("token");
      // uni.showLoading({
      // 	title: '加载中'
      // });
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/essencesPost",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.circleId,
            pageNumber: 1,
            pageSize: this.pageSize1,
          },
        }).then((res) => {
          // uni.hideLoading();
          if (res.data.code == 200) {
            this.SerumList = res.data.data.rows.map((v) => {
              v.is_show = false;
              v.is_video = false;
              v.is_content = false;
              return v;
            });
            this.SerumList.forEach((v) => {
              if (v.comments.length > 3) {
                v.comments.length = 3;
              }
              if (v.thumbsList.length > 5) {
                v.thumbsList.length = 5;
              }

              if (v.imgCollection.length > 0) {
                //不止一张
                v.imgCollection.forEach((value, index) => {
                  if (value.fileType == 3) {
                    //有视频
                    v.is_video = true;
                  }
                });
              }
              if (v.content.length > 75) {
                v.content = v.content.substring(0, 70);
                v.is_content = true;
              }
            });
            this.SerumTotal = res.data.data.total;

            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore1 &&
              this.SerumList.length >= res.data.data.total &&
              this.bottom1
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore1 = true;
              return false;
            }

            if (this.SerumList.length >= res.data.data.total && this.bottom1) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              this.SerumList.length < res.data.data.total &&
              this.bottom1
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleSerum(id, index, item) {
      //设置精华
      this.bottom = false;
      this.bottom1 = false;
      this.bottom2 = false;
      this.bottom6 = false;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/updateIsEssences",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            isEssences: index,
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (this.SerumList.length != 0) {
              this.SerumList.forEach((v) => {
                v.is_show = false;
              });
            }
            if (this.topicTList.length != 0) {
              this.topicTList.forEach((v) => {
                v.is_show = false;
              });
            }
            this.is_show = false;
            if (index == 1) {
              uni.showToast({
                title: "设置精华帖成功",
                duration: 1500,
                icon: "none",
              });
            } else {
              uni.showToast({
                title: "取消精华帖成功",
                duration: 1500,
                icon: "none",
              });
            }
            if (item == 2) {
              this.bottom2 = false;
              this.newList();
            } else if (item == 1) {
              this.bottom1 = false;
              this.handleSerumList();
            } else if (item == 6) {
              this.bottom6 = false;
              this.handleTopic(this.topicId);
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleDelete(id, index) {
      //删除帖子
      this.bottom = false;
      this.bottom1 = false;
      this.bottom2 = false;
      this.bottom6 = false;
      this.is_show = false;
      if (index == 1) {
        this.SerumList.forEach((v) => {
          v.is_show = false;
        });
      } else if (index == 2) {
        this.newQList.forEach((v) => {
          v.is_show = false;
        });
      } else if (index == 6) {
        this.topicTList.forEach((v) => {
          v.is_show = false;
        });
      }
      // console.log(id,id1)
      uni.showModal({
        title: "提示",
        content: "是否确定删除该条帖子",
        confirmColor: "#000000",
        cancelColor: "#007aff",
        cancelText: "再想想",
        success: (e) => {
          if (e.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/activity/orgDeleteAct?uid=",
                method: "post",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  relationId: id,
                  type: 13,
                  orgId: this.circleId,
                },
              }).then((res) => {
                // console.log(res, '删除帖子')
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "删除成功",
                    duration: 1000,
                    icon: "none",
                  });
                  if (index == 1) {
                    this.handleSerumList();
                  } else if (index == 2) {
                    this.newList();
                  } else if (index == 6) {
                    this.handleTopic(this.topicId);
                  }
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    updateIsTop(id, index) {
      //帖子置顶
      this.bottom1 = false;
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/updateIsTop",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            isTop: index,
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.SerumList.forEach((v) => {
              v.is_show = false;
            });
            this.is_show = false;
            if (index == 0) {
              uni.showToast({
                title: "取消置顶成功",
                duration: 1500,
                icon: "none",
              });
            } else {
              uni.showToast({
                title: "置顶成功",
                duration: 1500,
                icon: "none",
              });
            }
            this.handleSerumList();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleZan(id, index, item) {
      //帖子点赞
      this.bottom = false;
      this.bottom1 = false;
      this.bottom2 = false;
      this.bottom6 = false;
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/appUserThumbs/thumbs",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            thumbsId: id,
            type: 13,
            status: index,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (item == 2) {
              this.bottom2 = false;
              this.newList();

              setTimeout(() => {
                if (index == 0) {
                  uni.showToast({
                    title: "点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                } else if (index == 1) {
                  uni.showToast({
                    title: "取消点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                }
              }, 2);
            } else if (item == 1) {
              this.bottom = false;
              this.handleSerumList();
              setTimeout(() => {
                if (index == 0) {
                  uni.showToast({
                    title: "点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                } else if (index == 1) {
                  uni.showToast({
                    title: "取消点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                }
              }, 2);
            } else if (item == 6) {
              this.bottom6 = false;
              this.handleTopic(this.topicId);
              setTimeout(() => {
                if (index == 0) {
                  uni.showToast({
                    title: "点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                } else if (index == 1) {
                  uni.showToast({
                    title: "取消点赞成功",
                    duration: 1000,
                    icon: "none",
                  });
                }
              }, 2);
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    imgsDa(imgs, index) {
      //点击图片放大
      // console.log(imgs,index)
      let arrImg = [];
      imgs.forEach((v) => {
        arrImg.push(v.fileUrl);
      });
      uni.previewImage({
        urls: arrImg,
        current: index,
        loop: true,
      });
    },
    newList() {
      //最新帖
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/lastPost",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.circleId,
            pageSize: this.pageSize2,
            pageNumber: 1,
          },
        }).then((res) => {
          // uni.hideLoading();
          if (res.data.code == 200) {
            this.newQList = res.data.data.rows.map((v) => {
              v.is_show = false;
              v.is_video = false; //是否有视频
              v.is_content = false;
              return v;
            });

            this.newQList.forEach((v, i) => {
              if (v.thumbsList.length >= 5) {
                v.thumbsList.length = 5;
              }
              if (v.comments.length >= 3) {
                v.comments.length = 3;
              }
              if (v.imgCollection.length > 0) {
                //不止一张
                v.imgCollection.forEach((value, index) => {
                  if (value.fileType == 3) {
                    //有视频
                    v.is_video = true;
                  }
                });
              }
              if (v.content.length > 75) {
                v.content = v.content.substring(0, 70);
                v.is_content = true;
              }
            });

            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              this.newQList.length >= res.data.data.total &&
              this.bottom2 &&
              !this.noMore2
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore2 = true;
              return false;
            }

            if (this.newQList.length >= res.data.data.total && this.bottom2) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              this.newQList.length < res.data.data.total &&
              this.bottom2
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 1500,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    quanMember() {
      //圈子成员列表
      let token = uni.getStorageSync("token");
      // uni.showLoading({
      // 	title: '加载中'
      // });
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/memberList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.circleId,
            isBlock: 0,
            name: "",
            isEstoppel: 0,
            pageNumber: 1,
            pageSize: this.pageSize,
          },
        }).then((res) => {
          // uni.hideLoading();
          if (res.data.code == 200) {
            this.memberList = res.data.data.rows;
            // this.findList = res.data.data
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore &&
              this.memberList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (this.memberList.length >= res.data.data.total && this.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              this.memberList.length < res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    quanDetailF() {
      //圈子详情
      let token = uni.getStorageSync("token");
      if (this.joinY) {
        uni.showLoading({
          title: "加载中",
        });
      }
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.circleId,
          },
        }).then((res) => {
          uni.hideLoading();
          if (res.data.code == 200) {
            this.chargeStatus = res.data.data.chargeStatus;
            if (res.data.data.userUrlList.length > 3) {
              res.data.data.userUrlList.length = 3;
            }
            this.handleShare(); //分享功能
            this.quanDetail = res.data.data;
            this.quanDetail.friendsTopics = [
              {
                topic: "成员",
                id: 1,
              },
              {
                topic: "精华",
                id: 2,
              },
              {
                topic: "最新",
                id: 3,
              },
              ...res.data.data.friendsTopics,
            ];

            if (
              this.quanDetail.isUserFriendsPay == 0 &&
              this.quanDetail.isOrg == 3
            ) {
              this.no_join = true;
            } else if (
              this.quanDetail.isUserFriendsPay == 1 &&
              this.quanDetail.isOrg == 3
            ) {
              this.is_rate = true;
              this.pay_type = 0; //圈子缴费
            } else if (
              this.quanDetail.isUserFriendsPay == 1 &&
              this.quanDetail.isOrg == 0
            ) {
              this.is_rate = true;
              this.pay_type = 1; //圈子续费
            } else {
              this.no_join = false;
              this.is_rate = false;
            }
            if (this.joinY) {
              this.newList(); //最新
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
            if (
              res.data.msg == "该圈子已注销" ||
              res.data.msg == "圈子不存在"
            ) {
              this.newQList = [];
              if (this.isZ == 1) {
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              } else {
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/index/index",
                  });
                }, 1000);
              }
            }
          }
        });
      }
    },
    guanbiFei() {
      //关闭续费弹窗
      uni.redirectTo({
        url: "/pages/index/noPayDetail?id=" + this.circleId, //去未缴费圈子展示
      });
    },
    handleJoin() {
      //点击取消加入圈子
      this.no_join = false;
    },
    joinYes() {
      this.joinY = false;
      //不收费的圈子加入
      setTimeout(() => {
        let token = uni.getStorageSync("token");
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/orgCircle/applyJoinFriends",
            method: "POST",
            header: {
              "Content-Type": "application/json",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },

            data: {
              orgId: this.circleId,
              socialId: this.socialId,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.no_join = false;
              uni.showToast({
                title: "加入圈子成功",
                duration: 2000,
                icon: "none",
              });
              this.quanDetailF(); //圈子详情
            } else {
              // console.log(res.data.msg)
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }, 50);
    },
    handleBtn() {
      //点击确定
      this.is_mask = true; //app跳转
    },
    quMask() {
      this.is_mask = false; //app跳转
    },
    handleFan() {
      //返回
      if (this.word == 1 || this.type == 1) {
        //分享页面
        uni.redirectTo({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    handleTopic(id) {
      //话题关联列表
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/classificationPost",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: 1,
            pageSize: this.pageSize6,
            orgId: this.circleId,
            topicId: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.topicTList = res.data.data.rows.map((v) => {
              v.is_show = false;
              v.is_video = false;
              v.is_content = false;
              return v;
            });
            this.topicTList.forEach((v, i) => {
              if (v.thumbsList.length >= 5) {
                v.thumbsList.length = 5;
              }
              if (v.comments.length >= 3) {
                v.comments.length = 3;
              }
              if (v.imgCollection.length > 0) {
                //不止一张
                v.imgCollection.forEach((value, index) => {
                  if (value.fileType == 3) {
                    //有视频
                    v.is_video = true;
                  }
                });
              }
              if (v.content.length > 75) {
                v.content = v.content.substring(0, 70);
                v.is_content = true;
              }
            });

            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore6 &&
              this.topicTList.length >= res.data.data.total &&
              this.bottom6
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore6 = true;
              return false;
            }

            if (this.topicTList.length >= res.data.data.total && this.bottom6) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              this.topicTList.length < res.data.data.total &&
              this.bottom6
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleChangeTab(index, id) {
      this.activeIndex = index;
      if (index == 0) {
        this.bottom = false;
        this.pageSize = 10;
        this.quanMember();
      } else if (index == 2) {
        this.bottom2 = false;
        this.pageSize2 = 10;
        this.newList();
      } else if (index == 1) {
        this.bottom1 = false;
        this.pageSize1 = 10;
        this.handleSerumList();
      } else {
        //话题帖子列表
        this.bottom6 = false;
        this.pageSize6 = 10;
        this.topicId = id;
        this.handleTopic(this.topicId);
      }
    },
    showNo() {
      //点赞遮罩事件
      this.newQList.forEach((e) => {
        e.is_show = false;
      });
      if (this.SerumList.length != 0) {
        this.SerumList.forEach((e) => {
          e.is_show = false;
        });
      }
      if (this.topicTList.length != 0) {
        this.topicTList.forEach((v) => {
          v.is_show = false;
        });
      }

      this.is_show = false;
    },
    showZhi(index) {
      //帖子操作
      if (this.activeIndex == 2) {
        this.newQList.forEach((e) => {
          e.is_show = false;
        });
        this.is_show = true;
        this.newQList[index].is_show = true;
      } else if (this.activeIndex == 1) {
        this.SerumList.forEach((e) => {
          e.is_show = false;
        });
        this.is_show = true;
        this.SerumList[index].is_show = true;
      } else if (this.activeIndex != 0 && this.topicTList.length != 0) {
        this.topicTList.forEach((e) => {
          e.is_show = false;
        });
        this.is_show = true;
        this.topicTList[index].is_show = true;
      }
    },
  },
  onPageScroll(e) {
    let _sTop = 155;
    let _top = e.scrollTop;
    this.topOpacity = Math.abs(_sTop - e.scrollTop) / _sTop;
    this.topOpacity2 = Math.abs(1 - this.topOpacity);
    if (_top >= 100) {
      this.scrollTop = true;
      this.topOpacity2 = 1;
    } else if (_top <= 20) {
      this.scrollTop = false;
      this.topOpacity2 = Math.abs(_sTop - e.scrollTop) / 150;
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 120rpx;
}

.mask_FX {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99996666;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 570rpx;
    height: 758rpx;
  }

  .text {
    color: #fff;
    width: 100%;
    text-align: center;
    margin-left: -150rpx;
    margin-top: -20rpx;
  }
}

.share {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #7f7f7f;
  z-index: 9999;

  .top_ {
    position: absolute;
    right: 74rpx;
    top: 64rpx;
    width: 316rpx;
    height: 132rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 18rpx;
    padding-right: 10rpx;
    box-sizing: border-box;

    .jiao_ {
      z-index: 99;
      height: 0;
      width: 0;
      border-bottom: 17rpx solid #fff;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
      position: absolute;
      top: -17rpx;
      right: 30rpx;
    }

    .title_ {
      font-size: 22rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000;
    }

    .body_ {
      margin-top: 3rpx;
      font-size: 16rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;

      text {
        position: relative;
        top: -6rpx;
        margin-left: 12rpx;
        display: inline-block;
        width: 40rpx;
        height: 22rpx;
        background: #f0f0f0;
        border-radius: 4rpx;
        text-align: center;
        line-height: 22rpx;
        font-size: 20rpx;
        font-weight: 700;
        line-height: 10rpx;
      }
    }
  }

  .center_ {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    width: 600rpx;
    height: 706rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .btn_ {
      position: absolute;
      bottom: 32rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 496rpx;
      height: 74rpx;
      background: linear-gradient(135deg, #fce3ac 0%, #ffc56b 100%);
      border-radius: 46rpx;
      line-height: 74rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-shadow: 0px 4rpx 8rpx #dea853;
      text-align: center;
    }
  }

  .bottom_ {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 65rpx;
    height: 65rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.wu_Huo {
  margin-top: 220rpx;
  padding-bottom: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 310rpx;
    height: 220rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.zhezhao1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.content1 {
  // position: absolute;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520rpx;
  height: 564rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  z-index: 999999;

  .top {
    width: 520rpx;
    height: 260rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 70%;
      height: 70%;
    }

    .guanbi {
      width: 22rpx;
      height: 22rpx;
      position: absolute;
      top: 25rpx;
      right: 25rpx;
    }
  }

  // .tishi_ {
  // 	width: 100%;
  // 	text-align: center;
  // 	font-size: 40rpx;
  // 	font-family: PingFang SC;
  // 	font-weight: bold;
  // 	color: #343434;
  // }

  .title {
    width: 100%;
    box-sizing: border-box;
    padding: 0 38rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #343434;
    line-height: 48rpx;
    margin-top: 20rpx;
    text-align: center;
  }

  .footer_btn {
    width: 328rpx;
    height: 86rpx;
    background: #2268eb;
    border-radius: 43rpx;
    margin: 50rpx auto;
    line-height: 86rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
}

.zheZhao {
  position: fixed;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 8rpx;
  width: 520rpx;
  height: 300rpx;
  box-sizing: border-box;
  padding-top: 30rpx;
  z-index: 9999999999;

  .header {
    width: 100%;
    text-align: center;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .text {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(49, 49, 49, 1);
    width: 100%;
    text-align: center;
    margin-top: 30rpx;
  }

  .btn_ {
    position: absolute;
    bottom: 0;
    height: 85rpx;
    border-top: 2rpx solid #eee;
    width: 100%;
    display: flex;

    view {
      box-sizing: border-box;
      width: 50%;
      height: 85rpx;
      line-height: 85rpx;
      text-align: center;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.4);

      .right {
        width: 100%;
        height: 100%;
      }
    }

    .left {
      border-right: 2rpx solid #eee;
    }

    .right1 {
      color: #2268eb;
    }
  }
}

.three66 {
  position: absolute;
  top: 90rpx;
  right: 35rpx;
  width: 180rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 66666666;

  .one1 {
    padding: 15rpx 0;
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    border-bottom: 2rpx solid #eee;
  }

  .one1:last-child {
    border-bottom: none;
  }

  .jiao {
    height: 0;
    width: 0;
    border-bottom: 15rpx solid #fff;
    border-left: 7.5rpx solid transparent;
    border-right: 7.5rpx solid transparent;
    position: absolute;
    right: 16rpx;
    top: -15rpx;
  }
}

.three666 {
  top: 55rpx;
}

.main66 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.2);
}

.main > .top {
  width: 750rpx;
  height: 490rpx;
  background: #176bd8;
  position: relative;
  padding: 0 32rpx;
  box-sizing: border-box;

  .tuichu {
    width: 36rpx;
    height: 36rpx;
    position: absolute;
    top: 50rpx;
    right: 32rpx;
    display: flex;
    align-items: center;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .shezhi {
    height: 42rpx;
    width: 42rpx;
    position: absolute;
    top: 48rpx;
    right: 100rpx;
    display: flex;
    align-items: center;

    // z-index: 99;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .detail {
    display: flex;
    // padding:0 30rpx;
    padding-top: 148rpx;
    width: 100%;
    box-sizing: border-box;

    .left {
      width: 114rpx;
      height: 114rpx;
      border: 2rpx solid rgba(255, 255, 255, 1);
      margin-right: 18rpx;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    > .right {
      position: relative;

      > image {
        width: 32rpx;
        height: 35rpx;
        position: absolute;
        opacity: 1;
        bottom: -26rpx;
        right: 6rpx;
      }

      .name {
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 48rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .des {
        width: 545rpx;
        opacity: 0.9;
        margin-top: 12rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 30rpx;
      }

      .des_Is {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }

  .quanzi {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid rgba(255, 255, 255, 0.25);

    .left {
      display: flex;

      .one {
        width: 60rpx;
        height: 60rpx;
        margin-right: 12rpx;
        border-radius: 50%;
        border: 2rpx solid #fff;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .two {
        .title {
          font-size: 22rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .dest {
          position: relative;
          bottom: -6rpx;
          width: 54rpx;
          height: 22rpx;
          background: linear-gradient(
            136deg,
            rgba(255, 197, 79, 1) 0%,
            rgba(255, 107, 79, 1) 100%
          );
          border-radius: 12rpx;
          text-align: center;
          line-height: 22rpx;
          font-size: 14rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          // z-index: 999;
        }
      }
    }

    .right {
      display: flex;
      margin-top: 18rpx;

      .imgs {
        display: flex;
        margin-right: 15rpx;

        image {
          height: 30rpx;
          width: 30rpx;
          border-radius: 50%;
        }

        image.imgsss:first-child {
          position: relative;
          right: -28rpx;
          z-index: 77;
        }

        image.imgsss:nth-child(2) {
          position: relative;
          right: -13rpx;
          z-index: 88;
        }

        image.imgsss:nth-child(3) {
          position: relative;
          z-index: 99;
        }

        // 两张图
        image.imgss:nth-child(1) {
          position: relative;
          right: -10rpx;
          z-index: 88;
        }

        image.imgss:nth-child(2) {
          position: relative;
          z-index: 99;
        }
      }

      text {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 33rpx;
        text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
      }
    }
  }

  .lable {
    display: flex;
    margin-top: 32rpx;
    flex-wrap: wrap;
    overflow: hidden;

    .item {
      height: 36rpx;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 19rpx;
      // opacity:0.24;
      padding: 0 22rpx;
      text-align: center;
      line-height: 36rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      margin-right: 12rpx;
      margin-bottom: 10rpx;
    }
  }
}

.main > .top1 {
  width: calc(100% - 64rpx);
  z-index: 999;
  background: #176bd8;
  height: 70rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;

  .left {
    display: flex;

    .one {
      width: 70rpx;
      height: 70rpx;
      margin-right: 12rpx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .two {
      height: 70rpx;
      flex-direction: column;
      justify-content: space-between;

      .first {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

      .second {
        position: relative;
        bottom: -6rpx;
        font-size: 18rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        display: flex;

        text {
          display: inline-block;
          width: 44rpx;
          height: 20rpx;
          margin-right: 8rpx;
          border-radius: 12rpx;
          border: 2rpx solid rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 20rpx;
          font-size: 12rpx;
          // font-size: 12rpx;

          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  .right {
    display: flex;

    .tuichu1 {
      width: 37rpx;
      height: 37rpx;
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      margin-top: 7rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .shezhi1 {
      height: 42rpx;
      width: 42rpx;
      margin-top: 3rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
}

.active999 {
  background-color: #fff;
  width: 100%;
  position: fixed;
  top: 116rpx;
  left: 0;
  z-index: 999;
  height: 75rpx;
}

.content6 {
  margin-top: 200rpx;
}

.content {
  // margin-bottom: 167rpx;

  .tab {
    margin-top: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item_tab {
      width: 500rpx;
      display: flex;
      white-space: nowrap; // 滚动必须加的属性

      .tabIndex {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 42rpx;
        padding: 10rpx 30rpx;
      }

      .active {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 45rpx;

        .xian_ {
          display: block;
          width: 36rpx;
          height: 6rpx;
          background: rgba(33, 104, 235, 1);
          border-radius: 3rpx;
          margin: 0 auto;
        }
      }
    }

    .jiaTab {
      background-color: #fff;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 10rpx;
      width: 60rpx;
      margin-top: -3rpx;

      image {
        border-radius: 50%;
        width: 36rpx;
        height: 36rpx;
      }
    }
  }

  .child {
    padding: 0 32rpx;
    // padding-bottom: 190rpx;

    .item {
      padding: 23rpx 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid rgba(238, 238, 238, 1);

      &:last-child {
        border-bottom: none;
      }

      .left {
        display: flex;

        .one {
          width: 74rpx;
          height: 74rpx;
          margin-right: 14rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        > .two {
          // flex : 1
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 74rpx;
          width: 550rpx;

          > .top {
            margin-top: -6rpx;
            display: flex;

            .name {
              font-size: 28rpx;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .dec {
              font-size: 22rpx;
              // font-family:PingFangSC-Regular,PingFang SC;
              font-weight: 400;
              color: rgba(136, 136, 136, 1);
              display: inline-block;
              margin-left: 15rpx;
              // width: 220rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              margin-top: 3rpx;
            }

            .zhu {
              flex-shrink: 0;
              display: inline-block;
              width: 50rpx;
              height: 22rpx;
              background: linear-gradient(
                136deg,
                rgba(255, 197, 79, 1) 0%,
                rgba(255, 107, 79, 1) 100%
              );
              border-radius: 12rpx;
              line-height: 22rpx;
              text-align: center;
              font-size: 12rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              margin-left: 8rpx;
              margin-top: 8rpx;
            }
          }

          .bottom {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(70, 70, 70, 1);

            .xian {
              width: 2rpx;
              height: 12rpx;
              background: rgba(204, 204, 204, 1);
              display: inline-block;
              margin: 0 15rpx;
            }
          }
        }
      }

      > .right {
        position: relative;
        top: -25rpx;
      }
    }
  }

  .child1 .jing {
    margin-top: 12rpx;
    position: relative;
    width: 750rpx;
    height: 126rpx;
    background: linear-gradient(
      360deg,
      rgba(207, 241, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );

    image {
      width: 100%;
      height: 100%;
    }

    .cont {
      position: absolute;
      top: 20rpx;
      left: 31rpx;

      .num {
        font-size: 44rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(33, 104, 235, 1);

        text {
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          display: inline-block;
          margin-left: 12rpx;
        }
      }

      .zi {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-top: 5rpx;
      }
    }
  }
}

.fixation {
  border-top: 2rpx solid #eee;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 1rpx 0px 0px rgba(0, 0, 0, 0.2);
  padding: 12rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  z-index: 666;

  .one {
    // width: 366rpx;
    flex: 1;
    height: 74rpx;
    background: rgba(245, 246, 247, 1);
    border-radius: 46rpx;
    display: flex;
    align-items: center;
    padding-left: 29rpx;
    box-sizing: border-box;

    image {
      width: 26rpx;
      height: 27rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }

  .two {
    margin-left: 32rpx;
    width: 138rpx;
    height: 58rpx;
    background: linear-gradient(
      317deg,
      rgba(21, 113, 235, 1) 0%,
      rgba(57, 154, 255, 1) 100%
    );
    border-radius: 29rpx;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    image {
      width: 26rpx;
      height: 26rpx;
      vertical-align: top;
    }

    text {
      display: inline-block;
      margin-top: -6rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }

  .three {
    margin-left: 32rpx;
    // width: 138rpx;
    height: 58rpx;
    background: linear-gradient(
      133deg,
      rgba(32, 227, 105, 1) 0%,
      rgba(17, 186, 152, 1) 100%
    );
    border-radius: 29rpx;
    border-radius: 29rpx;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    image {
      width: 31rpx;
      height: 31rpx;
    }

    text {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}

.child2 {
  margin-top: 30rpx;
  padding: 0 32rpx;
  padding-bottom: 22rpx;
  position: relative;
}

// 分割线
.child2 .xian {
  height: 2rpx;
  background-color: rgba(238, 238, 238, 1);
  width: 750rpx;
  margin-left: -32rpx;
  position: absolute;
  bottom: 0;
}

.child2:last-child .xian {
  display: none;
}

// 省略号
.child2 .text_ {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(70, 70, 70, 1);
  margin-top: 20rpx;
  position: relative;
  line-height: 42rpx;

  text {
    display: inline-block;
    margin-left: 2rpx;
    font-size: 30rpx;
  }

  .quan {
    display: inline-block;
    margin-left: 10rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2168eb;
    line-height: 30rpx;
  }
}

// 图片
.child2 .imgs {
  // height: 220rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  overflow: hidden;

  image {
    margin-top: 10rpx;
    width: 220rpx;
    height: 220rpx;
    border-radius: 8rpx;
    margin-right: 13rpx;
  }

  image:nth-child(3n) {
    margin-right: 0;
  }

  .myVideo {
    width: 100%;
    height: 400rpx;
  }
}

// 点赞评论
.child2 .commit {
  height: 44rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    width: 500rpx;

    text {
      display: inline-block;
      margin-left: -60rpx;
      position: relative;
      top: -12rpx;
    }

    text.four {
      margin-left: -40rpx;
    }

    text.three {
      margin-left: -28rpx;
    }

    text.two {
      margin-left: -10rpx;
    }

    text.one {
      margin-left: 12rpx;
    }

    image {
      height: 44rpx;
      width: 44rpx;
      border-radius: 50%;
    }

    image:first-child {
      position: relative;
      z-index: 100;
    }

    image:nth-child(2) {
      position: relative;
      left: -20rpx;
      z-index: 99;
    }

    image:nth-child(3) {
      position: relative;
      left: -40rpx;
      z-index: 95;
    }

    image:nth-child(4) {
      position: relative;
      left: -60rpx;
      z-index: 92;
    }

    image:nth-child(5) {
      position: relative;
      left: -80rpx;
      z-index: 90;
    }
  }

  .right {
    display: flex;
    margin-top: 4rpx;

    .one image {
      width: 38rpx;
      height: 39rpx;
    }

    .two image {
      width: 38rpx;
      height: 35rpx;
      margin-left: 35rpx;
    }

    .one text,
    .two text {
      font-size: 22rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin-left: 6rpx;
      position: relative;
      top: -15rpx;
      // left : -8rpx;
    }
  }
}

// 评论列表
.child2 .commit_list {
  margin-top: 12rpx;
  background: rgba(248, 248, 250, 1);
  width: 100%;
  padding: 0 17rpx;
  box-sizing: border-box;

  .item {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333ff;
    line-height: 37rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: flex;
    align-items: center;

    .t_comm {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      width: 370rpx;
    }

    .name {
      color: rgba(80, 113, 173, 1);
      margin-right: 8rpx;
    }

    .name1 {
      width: 125rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

    .img {
      display: flex;
      align-items: center;
      margin-right: 10rpx;

      image {
        margin-right: 7rpx;
        width: 30rpx;
        height: 25rpx;
      }

      text {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5071ad;
      }
    }
  }

  .footer {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(84, 116, 174, 1);
    line-height: 33rpx;

    text {
      display: inline-block;
      height: 16rpx;
      height: 10rpx;
      font-size: 30rpx;
    }
  }
}

.child1 {
  // padding-bottom: 20rpx;
}

.child1 .child2 .top {
  display: flex;
  justify-content: space-between;

  > .right {
    .one {
      width: 30rpx;
      height: 6rpx;
      color: #333;
      font-weight: 700;
      margin-top: -16rpx;
      margin-right: 8rpx;
      // font-size: 50rpx;
      float: right;
    }

    .two {
      margin-top: 6rpx;
      position: relative;
      bottom: -20rpx;

      .zhiding {
        width: 54rpx;
        height: 30rpx;
        background: linear-gradient(
          319deg,
          rgba(244, 31, 48, 1) 0%,
          rgba(255, 101, 78, 1) 100%
        );
        border-radius: 8rpx;
        padding-right: 2rpx;
      }

      .jinghua {
        margin-left: 3rpx;
        width: 30rpx;
        height: 30rpx;
        background: linear-gradient(
          324deg,
          rgba(255, 164, 2, 1) 0%,
          rgba(253, 201, 0, 1) 100%
        );
        border-radius: 8rpx;
      }
    }
  }

  > .left {
    display: flex;

    .one {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two {
      display: flex;
      flex-direction: column;
      height: 80rpx;
      justify-content: space-between;

      .top1 {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;

        > view {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        text {
          // width: 290rpx;
          display: inline-block;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          margin-left: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }

      .bottom1 {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-top: -10rpx;
        color: rgba(136, 136, 136, 1);
      }
    }
  }
}
</style>
